<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/md5.js"></script>



</head>
<style type="text/css">
    body {
        text-align: center;
        background-color: #00744b;
    }

    .title {
        font-size: 1.2rem;
        margin-top: 3rem;
        color: #22C3AA;
    }
</style>
<script type="text/javascript">
    (function() {

        window.H5lock = function(obj) {
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = Number(window.localStorage.getItem('chooseType')) || obj.chooseType;
        };

        H5lock.prototype.drawCle = function(x, y) { // 初始化解锁密码面板
            this.ctx.strokeStyle = '#CFE6FF';
            this.ctx.lineWidth = 2;
            this.ctx.beginPath();
            this.ctx.arc(x, y, this.r, 0, Math.PI * 2, true);
            this.ctx.closePath();
            this.ctx.stroke();
        }
        H5lock.prototype.drawPoint = function() { // 初始化圆心
            for (var i = 0; i < this.lastPoint.length; i++) {
                this.ctx.fillStyle = '#CFE6FF';
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r / 2, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.fill();
            }
        }
        H5lock.prototype.drawStatusPoint = function(type) { // 初始化状态线条
            for (var i = 0; i < this.lastPoint.length; i++) {
                this.ctx.strokeStyle = type;
                this.ctx.beginPath();
                this.ctx.arc(this.lastPoint[i].x, this.lastPoint[i].y, this.r, 0, Math.PI * 2, true);
                this.ctx.closePath();
                this.ctx.stroke();
            }
        }
        H5lock.prototype.drawLine = function(po, lastPoint) { // 解锁轨迹
            this.ctx.beginPath();
            this.ctx.lineWidth = 3;
            this.ctx.moveTo(this.lastPoint[0].x, this.lastPoint[0].y);
            // console.log(this.lastPoint.length);
            for (var i = 1; i < this.lastPoint.length; i++) {
                this.ctx.lineTo(this.lastPoint[i].x, this.lastPoint[i].y);
            }
            this.ctx.lineTo(po.x, po.y);
            this.ctx.stroke();
            this.ctx.closePath();

        }
        H5lock.prototype.createCircle = function() { // 创建解锁点的坐标，根据canvas的大小来平均分配半径

            var n = this.chooseType;
            var count = 0;
            this.r = this.ctx.canvas.width / (2 + 3 * n); // 公式计算
            this.lastPoint = [];
            this.arr = [];
            this.restPoint = [];
            var r = this.r;
            for (var i = 0; i < n; i++) {
                for (var j = 0; j < n; j++) {
                    count++;
                    var obj = {
                        x: j * 3.5 * r + 2 * r,
                        y: i * 3.5 * r + 3 * r,
                        index: count
                    };
                    this.arr.push(obj);
                    this.restPoint.push(obj);
                }
            }
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
            for (var i = 0; i < this.arr.length; i++) {
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }
            //return arr;
        }
        H5lock.prototype.getPosition = function(e) { // 获取touch点相对于canvas的坐标
            var rect = e.currentTarget.getBoundingClientRect();
            var po = {
                x: e.touches[0].clientX - rect.left,
                y: e.touches[0].clientY - rect.top
            };
            return po;
        }
        H5lock.prototype.update = function(po) { // 核心变换方法在touchmove时候调用
            this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

            for (var i = 0; i < this.arr.length; i++) { // 每帧先把面板画出来
                this.drawCle(this.arr[i].x, this.arr[i].y);
            }

            this.drawPoint(this.lastPoint); // 每帧花轨迹
            this.drawLine(po, this.lastPoint); // 每帧画圆心

            for (var i = 0; i < this.restPoint.length; i++) {
                if (Math.abs(po.x - this.restPoint[i].x) < this.r && Math.abs(po.y - this.restPoint[i].y) < this.r) {
                    this.drawPoint(this.restPoint[i].x, this.restPoint[i].y);
                    this.lastPoint.push(this.restPoint[i]);
                    this.restPoint.splice(i, 1);
                    break;
                }
            }

        }
        H5lock.prototype.checkPass = function(psw1, psw2) { // 检测密码
            var p1 = '',
                p2 = '';
            for (var i = 0; i < psw1.length; i++) {
                p1 += psw1[i].index + psw1[i].index;
            }
            for (var i = 0; i < psw2.length; i++) {
                p2 += psw2[i].index + psw2[i].index;
            }
            return p1 === p2;
        }
        H5lock.prototype.storePass = function(psw) { // touchend结束之后对密码和状态的处理
            if (this.pswObj.step == 1) {
                if (this.checkPass(this.pswObj.fpassword, psw)) {
                    this.pswObj.step = 1;
                    this.pswObj.spassword = psw;
                    document.getElementById('title').innerHTML = '密码保存成功';
                    this.drawStatusPoint('#2CFF26');
                    window.localStorage.setItem('passwordxx', JSON.stringify(this.pswObj.spassword));
                    window.localStorage.setItem('chooseType', this.chooseType);

                    // setTimeout("reloadTime()",500);
                    set_gesture(this.pswObj.spassword);



                } else {
                    document.getElementById('title').innerHTML = '两次不一致，重新输入';
                    this.drawStatusPoint('red');
                    delete this.pswObj.step;
                }
            } else if (this.pswObj.step == 2) {
                if (this.checkPass(this.pswObj.spassword, psw)) {
                    document.getElementById('title').innerHTML = '解锁成功';
                    this.drawStatusPoint('#2CFF26');
                } else {
                    this.drawStatusPoint('red');
                    document.getElementById('title').innerHTML = '解锁失败';
                }
            } else {
                this.pswObj.step = 1;
                this.pswObj.fpassword = psw;
                document.getElementById('title').innerHTML = '再次输入';
            }

        }
        H5lock.prototype.makeState = function() {
            if (this.pswObj.step == 2) {
                document.getElementById('updatePassword').style.display = 'block';
                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('title').innerHTML = '请解锁';
            } else if (this.pswObj.step == 1) {
                //document.getElementById('chooseType').style.display = 'none';
                document.getElementById('updatePassword').style.display = 'none';
            } else {
                document.getElementById('updatePassword').style.display = 'none';
                //document.getElementById('chooseType').style.display = 'block';
            }
        }
        H5lock.prototype.setChooseType = function(type) {
            chooseType = type;
            init();
        }
        H5lock.prototype.updatePassword = function() {
            window.localStorage.removeItem('passwordxx');
            window.localStorage.removeItem('chooseType');
            this.pswObj = {};
            document.getElementById('title').innerHTML = '绘制解锁图案';
            this.reset();
        }
        H5lock.prototype.initDom = function() {
            var wrap = document.createElement('div');
            var str = '<h4 id="title" class="title">绘制解锁图案</h4>' +
                '<a id="updatePassword" style="position: absolute;right: 5px;top: 5px;color:#fff;font-size: 10px;display:none;">重置密码</a>' +
                '<canvas id="canvas" width="350" height="350" style="display: inline-block;margin-top:0px;"></canvas>';
            wrap.setAttribute('style', 'position: absolute;top:0;left:0;right:0;bottom:0;');
            wrap.innerHTML = str;
            document.body.appendChild(wrap);
        }
        H5lock.prototype.init = function(index) {
            this.initDom();
            this.pswObj = window.localStorage.getItem('passwordxx') ? {
                step: index,
                spassword: JSON.parse(window.localStorage.getItem('passwordxx'))
            } : {};
            this.lastPoint = [];
            this.makeState();
            this.touchFlag = false;
            this.canvas = document.getElementById('canvas');
            this.ctx = this.canvas.getContext('2d');
            this.createCircle();
            this.bindEvent();
        }
        H5lock.prototype.reset = function() {
            this.makeState();
            this.createCircle();
        }
        H5lock.prototype.bindEvent = function() {
            var self = this;
            this.canvas.addEventListener("touchstart", function(e) {
                e.preventDefault(); // 某些android 的 touchmove不宜触发 所以增加此行代码
                var po = self.getPosition(e);
                //  console.log(po);
                for (var i = 0; i < self.arr.length; i++) {
                    if (Math.abs(po.x - self.arr[i].x) < self.r && Math.abs(po.y - self.arr[i].y) < self.r) {

                        self.touchFlag = true;
                        self.drawPoint(self.arr[i].x, self.arr[i].y);
                        self.lastPoint.push(self.arr[i]);
                        self.restPoint.splice(i, 1);
                        break;
                    }
                }
            }, false);
            this.canvas.addEventListener("touchmove", function(e) {
                if (self.touchFlag) {
                    self.update(self.getPosition(e));
                }
            }, false);
            this.canvas.addEventListener("touchend", function(e) {
                if (self.touchFlag) {
                    self.touchFlag = false;
                    self.storePass(self.lastPoint);
                    setTimeout(function() {

                        self.reset();
                    }, 300);
                }

            }, false);
            document.addEventListener('touchmove', function(e) {
                e.preventDefault();
            }, false);
            document.getElementById('updatePassword').addEventListener('click', function() {
                self.updatePassword();
            });
        }
    })();


    function set_gesture(password) {
        passwordArray = new Array;
        for (var i = 0; i < password.length; i++) {
            passwordArray.push(password[i]['index']);
        }


        var temp = passwordArray.join('');
        var userid = $api.getStorage('userid');
        api.ajax({
            url: webAddress + '/index.php?ctl=app_user_center2&act=edit_gesture',
            method: 'post',
            data: {
                values: {
                    id: userid,
                    gesture: temp,
                },
            }
        }, function(ret, err) {

            if (ret.status == 1) {
                api.toast({
                    msg: ret.info,
                    duration: 2000,
                    location: 'bottom'
                });
                // setTimeout("reloadTime()",500);
                $api.setStorage('gesture', $.md5(temp));
                $api.setStorage('is_gesture', true);

                reloadTime();

            } else {
                api.toast({
                    msg: ret.info,
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });


    }

    function reloadTime() {
        var name = api.pageParam.name;
        api.execScript({
            name: name,
            script: 'lock();'
        });
        api.closeWin();
    }


    apiready = function() {
        new H5lock({
            chooseType: 3,
        }).init();
    }
</script>

</html>
